<template>
  <view class="home">
    <search-module></search-module>
    <!-- 轮播图 -->
    <swiper :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,i) in swiperdata" :key="i" @click="toClass(item.swiper_id)">
        <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 分类 -->
    <view class="nav">
      <p class="navigation">分类</p>
      <ul class="nav-list" @click="navClickHandler">
        <li class="nav-item" v-for="item in navList" :key="item.cate_id" :data-cate_id="item.cate_id">
          <view class="nav-img">
            <image :src="item.cate_image_src"></image>
          </view>
          <view class="title">
            <p>{{item.cate_name}}</p>
            <span>{{item.cate_introduce}}</span>
          </view>
        </li>
      </ul>
    </view>
    <!-- 热门师资 -->
    <view class="populer-teacher">
      <p class="navigation">热门师资</p>
      <u-scroll-list>
        <view v-for="(item, index) in popTeacher" :key="item.teacher_id" class="tea-item" @click="toTeacher"
          :data-teacher_id="item.teacher_id">
          <image :src="item.image_src"></image>
          <view class="title">
            <p>{{item.name}}</p>
            <span>{{item.introduce}}</span>
          </view>
        </view>
      </u-scroll-list>
    </view>

    <!-- 最近学习 -->
    <view class="recent-learn">
      <p class="navigation">最近学习</p>
      <view class="learn-list">
        <view class="learn-item" v-for="item in recentLearn" :key="item.class_id" @click="toClass(item.class_id)">
          <image :src="item.image_src"></image>
          <view class="learn-intro">
            <h2 class="title">{{item.name}}</h2>
            <p>{{item.introduce}}</p>
            <p>{{item.teacher}}</p>
            <span>
              <uni-icons type="auth-filled" size="30"></uni-icons>{{item.sub_number}}
            </span>
          </view>
        </view>
      </view>
      <view class="more">
        <button @click="getMore">加载更多</button>
      </view>
    </view>
    <!-- 推荐课程 -->
    <view class="recent-learn">
      <p class="navigation">推荐课程</p>
      <view class="learn-list">
        <view class="learn-item" v-for="item in recentLearn" :key="item.class_id" @click="toClass(item.class_id)">
          <image :src="item.image_src"></image>
          <view class="learn-intro">
            <h2 class="title">{{item.name}}</h2>
            <p>{{item.introduce}}</p>
            <p>{{item.teacher}}</p>
            <span>
              <uni-icons type="auth-filled" size="30"></uni-icons>{{item.sub_number}}
            </span>
          </view>
        </view>
      </view>
      <view class="more">
        <button @click="getMore">加载更多</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {getHomeData,navClickHandler,getMore} from '../../utils/home.js'
  import {toClass,toTeacher} from '../../utils/common.js'
  export default {
    data() {
      return {
        // 轮播图数据列表
        swiperdata: [],
        // 分类导航数据列表
        navList: [],
        // 热门师资数据列表
        popTeacher: [],
        // 最近学习数据列表
        recentLearn: [],
        recentLearnNum: 4
      };
    },
    onLoad() {
      getHomeData(this)
    },
    methods: {
      // 跳转课程
            toClass(swiperId){
              return toClass(swiperId)
              },
            // 跳转分类
            navClickHandler(e){
              return navClickHandler(e)
            },
            // 跳转教师
            toTeacher(e){
              console.log(e.target.dataset);
              return toTeacher(e.target.dataset)
            },
            // 加载更多
            getMore:getMore
      // // 获取home页面所有数据的方法
      // getHomeData() {
      //   let obj = {
      //     method: "GET",
      //     showLoading: true,
      //     url: `/home/getHomeData`,
      //   }
      //   httpUtils.request(obj).then(res => {
      //     res.data.forEach(item => {
      //       switch (item.name) {
      //         case 'SwiperData':
      //           this.swiperdata = item.data
      //           break
      //         case "NavListData":
      //           this.navList = item.data
      //           break
      //         case "PopTeacherData":
      //           this.popTeacher = item.data
      //           break
      //         case "RecentLearnData":
      //           this.recentLearn = item.data
      //       }
      //     })
      //   }).catch(err => {
      //     console.log(err)
      //   });
      // },
      // // 分类点击事件
      // navClickHandler(e) {
      //   try {
      //     uni.setStorageSync('cate_id', e.target.dataset.cate_id);
      //   } catch (e) {
      //     console.log(e);
      //   }
      //   uni.switchTab({
      //     url: `/pages/cate/cate?cate_id=123`
      //   })
      // },
      // // 课程点击事件
      // toClass(id) {
      //   uni.navigateTo({
      //     url: `/subpackage/class_detail/class_detail?class_id=${id}`
      //   })
      // },
      // // 热门教师模块点击事件
      // toTeacher(e) {
      //   uni.navigateTo({
      //     url: `/subpackage/teacher/teacher?teacher_id=${e.target.dataset.teacher_id}`,
      //   })
      // },
      // // 最近学习加载更多
      // getMore() {
      //   this.recentLearnNum = this.recentLearnNum + 4
      //   console.log(this.recentLearn);
      //   uni.showToast({
      //     duration: 1000,
      //     icon: 'loading',
      //     title: '正在加载'
      //   })
      // }
    },

  }
</script>

<style lang="less" scoped>
  // 通用样式
  .nav,
  .populer-teacher,
  .recent-learn {
    margin: 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 30rpx;

    .navigation {
      font-size: 36rpx;
      font-weight: 600;
    }
  }

  swiper {
    height: 330rpx;

    swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
      }
    }
  }

  // 分类
  .nav {
    .nav-list {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 30rpx 0;

      .nav-item {
        position: relative;
        margin: 10rpx 0;
        display: flex;
        align-items: center;
        width: 45%;
        height: 100rpx;
        border-radius: 30rpx;
        // box-shadow: h-shadow v-shadow blur spread color inset;
        box-shadow: 0 4rpx 2rpx 4rpx #e2e2e2;
        border: 2rpx solid #e2e2e2;
        background-color: #fff;

        // 遮罩层
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }

        .title {
          padding-left: 10rpx;
        }

        .nav-img {
          position: relative;
          margin-left: 10rpx;
          width: 68rpx;
          height: 68rpx;
          background-color: pink;
          text-align: center;
          border-radius: 50%;

          image {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }
  }

  // 热门师资
  .populer-teacher {
    p {
      margin-bottom: 30rpx;
    }

    .tea-item {
      position: relative;
      padding: 0 20rpx;
      margin-right: 20rpx;
      display: flex;
      width: 60% !important;
      background-color: #fff;
      border: 2rpx solid #e2e2e2;
      border-radius: 30rpx;

      // 遮罩层
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      image {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }

      .title {
        width: 300rpx;
        padding: 30rpx 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p {
          font-size: 40rpx;
        }

        span {
          font-size: 30rpx;
        }
      }
    }

  }

  // 最近学习
  .recent-learn {
    padding: 20rpx 20rpx 50rpx 20rpx;

    .learn-list {
      .learn-item {
        display: flex;
        margin: 20rpx 20rpx;
        padding: 40rpx;
        width: auto;
        height: 180rpx;
        background-color: #fff;
        border-radius: 15rpx;
        border: 2rpx solid #e2e2e2;

        image {
          width: 300rpx;
          height: 160rpx;
        }

        .learn-intro {
          margin-left: 30rpx;

          .title {
            font-size: 30rpx;
            font-weight: 700;
          }
        }
      }
    }

    .more {
      padding: 0 150rpx;

      button {
        color: #fff;
        background-color: #55aaff;
        border-radius: 30rpx;
      }
    }
  }
</style>
